<template>
    <a-card title="我的应用" :bordered="false" class="card-module">
        <!--<a slot="extra" href="#">创建</a>-->
        <a-button  slot="extra" icon="plus" type="primary" @click="() => $router.push({ name : 'addClient' }).then()">创建</a-button>
        <!-- 应用列表 -->
        <a-list item-layout="horizontal" :grid="{ gutter: 16, sm: 1, md: 1, xl: 3, xxl: 3 }">

            <a-list-item v-for="item in dataList" :key="item.id" class="my-app">
                <a-list-item-meta>
                    <a-avatar slot="avatar" :src="item['appLogo']" />
                    <router-link :to="{ name : 'clientInfo',params : { id : item['id'] } }" slot="title" class="my-app-title">{{ item['appName'] }}</router-link>
                </a-list-item-meta>
                <p class="my-app-desc">{{ item['appDesc'] }}</p>
            </a-list-item>

        </a-list>

        <!-- 分页插件 -->
        <div style="clear: both; text-align: center;margin-top: 10px;">
            <a-pagination size="small" :page-size="page.size" :total="page.total" @change="onChange" />
        </div>
    </a-card>
</template>

<script>
    import { pagingQueryClient } from '../../../apis/index';
    export default {
        data(){
            return {
                //  数据列表
                dataList : [],
                //  分页信息
                page : {
                    size : 6,
                    total : 0
                }
            };
        },
        mounted(){
            //  初始化列表
            this.onChange(1,this.page.size);
        },
        methods : {
            onChange : function (current, size) {
                let $this = this;
                pagingQueryClient({ current : current,size : size }).then(res => {
                    $this.dataList = res.data['records'];
                    $this.page.total = parseInt(res.data['total']);
                    $this.page.size = parseInt(res.data['size']);
                });
            }
        }
    }
</script>
<style scoped>
    .my-app{
        width: calc(100% / 3 - 6px);
        margin-bottom: 6px;
        padding: 10px;
        background-color: #F4FAFF;
        margin-right: 6px;
    }
    .my-app:nth-child(3n){
        margin-right: 0;
    }
    .my-app-title{
        line-height: 35px;
        -webkit-line-clamp: 1;
    }
    .my-app-title,
    .my-app-desc{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .my-app-desc{
        height: 40px;
        margin-bottom: 0;
        -webkit-line-clamp: 2;
        color: rgba(0, 0, 0, 0.45);
    }
</style>
